<template>
	<Modal v-model="open" :closeOnMask="false" hasDivider hasCloseIcon>
		<div slot="header">#(table.title)</div>
		<div>
            <Form :model="form" :rules="rules" mode="#(option.dialogMode)" ref="form">
            #for(column:table.Columns)#if(column.isVisibleInForm())
                <FormItem label="#(column.Name)" prop="#(column.field)"#if(column.ControlType=='TextArea') single#end#if(column.isMandatory()) required#end>
                #switch(column.ControlType)
                    #case('Select')
                    <Select v-model="form.#(column.field)" #(column.viewOpt) filterable></Select>
                    #case('Checkbox')
                    <Checkbox v-model="form.#(column.field)" #(column.viewOpt) ></Checkbox>
                    #case('Radio')
                    <Radio v-model="form.#(column.field)" #(column.viewOpt) ></Radio>
                    #case('TextArea')
                    <textarea v-model="form.#(column.field)" rows="3" v-autosize v-wordcount="#(column.length)"></textarea>
                    #case('Date')
                    <DatePicker v-model="form.#(column.field)"></DatePicker>
                    #case('Time')
                    <DatePicker v-model="form.#(column.field)" type="time"></DatePicker>
                    #case('DateTime')
                    <DatePicker v-model="form.#(column.field)" type="datetime"></DatePicker>
                    #case('Switch')
                    <Switch v-model="form.#(column.field)"/>
                    #case('SwitchList')
                    <SwitchList v-model="form.#(column.field)" #(column.viewOpt) />
                    #default
                    #if(column.DataType==12)
                    <DatePicker v-model="form.#(column.field)" type="datetime"></DatePicker>
                    #else
                    <input type="text" v-model="form.#(column.field)"/>
                    #end
                #end
                </FormItem>
            #end
            #end
            </Form>
	    </div>
	    <div slot="footer">
	 		<Button @click="open=false">取消</Button>
	 		<Button :loading="loading" color="primary" @click="saveOrUpdate">确认</Button>
	 	</div>
    </Modal>
</template>
<script>
import {DataSource,ajax,util} from 'framework'
export default {
    name:'#(table.name)Dialog',
    data:function(){
        return {
        	open:false,
        	loading:false,
        	isAdd:false,
            form:{
                #for(column:table.columns)
                #if(column.isVisibleInForm())
                #(column.field):null,
                #end
                #end
            },
            //验证规则
            rules:#(table.rules)
        }
    },methods:{
    	show(primary){
    		this.loading=true
    		util.clean(this.form)
    		if(primary){//show edit
    			this.isAdd=false
    			ajax.get("#(firstToLowerCase(table.name))/detail",primary).then(r=>{
    				Object.assign(this.form,r.data)
    				this.loading=false;
    				this.open=true;
    			})
    		}else{
    			this.isAdd=true
    			//show add
    			this.open=true
    			this.loading=false
    		}
    	},
    	saveOrUpdate(){
    		var validResult=this.$refs.form.valid();
    		if(validResult.result){
    			this.loading=true
    			ajax.post(this.isAdd?'#(firstToLowerCase(table.name))/add':'#(firstToLowerCase(table.name))/save',this.form).then(r=>{
        			this.open=false;
        			this.$Message("已保存")
        			this.$emit("change",r.data)
        		}).catch(e=>{
        			this.loading=false
        			this.$Message(r.message)
        		})
    		}
    	}
    }
}
</script>
